<template>
  <div class="fill-base pd-25 mb-lg">
    <div class="f-title f-w-500 mb-20">我的订单</div>
    <el-row :gutter="24">
      <el-col :span="12">
        <div class="flex-y-center">
          <div class="f-s-14">订单编号：</div>
          <el-input
            v-model="querys.id"
            placeholder="请输入订单编号"
            class="wh flex-1"
          />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="flex-y-center wh">
          <div class="f-s-14">供应商名称：</div>
          <el-input
            v-model="querys.sellerName"
            placeholder="请输入供应商名称"
            class="wh flex-1"
          />
        </div>
      </el-col>
      <el-col :span="12" class="mt-lg">
        <div class="flex-y-center">
          <div class="f-s-14">成交日期：</div>
          <el-date-picker
            v-model="querys.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            class="wh flex-1"
          />
        </div>
      </el-col>

      <el-col :span="12" class="mt-lg">
        <div class="flex-x-start">
          <el-button @click="handleReset">重 置</el-button>
          <el-button type="primary" plain @click="handleSelect"
            >搜 索</el-button
          >
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="fill-base order-table">
    <el-tabs
      v-model="querys.status"
      class="pr-20 pl-20"
      @tab-click="handleTabsChange"
    >
      <el-tab-pane label="全部" :name="-1"></el-tab-pane>
      <el-tab-pane label="待签约" :name="0"></el-tab-pane>
      <el-tab-pane label="待发货" :name="1"></el-tab-pane>
      <el-tab-pane label="待收货" :name="2"></el-tab-pane>
      <el-tab-pane label="已完成" :name="3"></el-tab-pane>
    </el-tabs>

    <div
      class="mt-50 flex-center"
      v-if="tableData.length <= 0"
      v-loading="loading"
    >
      <el-empty :image="empty" />
    </div>
    <div class="pd-20" v-loading="loading" v-else>
      <div class="table-header">
        <el-row>
          <el-col :span="9" class="flex-x-center"> 车辆信息</el-col>
          <el-col :span="4" class="flex-x-center"> 单价</el-col>
          <el-col :span="2" class="flex-x-center"> 数量</el-col>
          <el-col :span="3" class="flex-x-center"> 实付款</el-col>
          <el-col :span="4" class="flex-x-center"> 交易状态</el-col>
          <el-col :span="2" class="flex-x-center"> 操作</el-col>
        </el-row>
      </div>

      <div
        class="table-body pb-lg"
        v-for="(item, index) in tableData"
        :key="index"
      >
        <el-row v-if="item && item.product">
          <el-col :span="24" class="table-body_header mb-lg">
            <div class="flex">
              <div class="mr-20">
                订单生成时间：
                {{ filters.dateYMDHMSFormat(item.timeCreate) }}
              </div>
              <div class="mr-20">订单编号：{{ item.id }}</div>
              <div>供应商：{{ item.sellerName }}</div>
            </div>
            <el-link
              v-if="item?.contractList?.url"
              type="primary"
              :underline="false"
              @click="onFileOpen(item.contractList.url)"
              >合同：{{ item.contractList.contractNb }}</el-link
            >
          </el-col>
          <el-col :span="9" class="flex-y-center">
            <div class="flex mr-sm ml-lg">
              <div class="goods-img">
                <img
                  :src="item.product.productDetail.prodcutPicList.thumbnailUrl"
                />
              </div>
              <div class="ml-md mr-md flex-1 goods-info flex-1">
                <div class="goods-name">
                  {{ item.product.productTitle }}
                </div>
                <div class="goods-port">启运港：{{ item.startHarborName }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4" class="flex-x-center f-s-14">
            <span>{{ item.productCurrency }}</span>
            <span class="ml-sm">{{
              filters.thousands(item.productPrice)
            }}</span>
          </el-col>
          <el-col :span="2" class="flex-x-center f-s-14">
            ×{{ item.productAmount }}
          </el-col>
          <el-col :span="3" class="flex-x-center f-s-14">
            <span>{{ item.productCurrency }}</span>
            <span class="ml-sm">
              {{ filters.thousands(item.productSumPrice) }}
            </span>
          </el-col>
          <el-col :span="4" class="flex-x-center f-s-14">
            <div>
              <div class="text-center">
                {{ getStatusLabel(orderType, item.status) }}
              </div>
              <el-button
                v-if="item.status > 6"
                size="small"
                class="mt-sm"
                @click="handleScheduleOpen(item)"
                >查看进度</el-button
              >
            </div>
          </el-col>
          <el-col :span="2" class="flex-x-center f-s-14">
            <div class="text-center">
              <div class="c-blue pointer mb-sm" @click="handleDetails(item)">
                <span v-if="item.status === 2">确认</span>
                <span v-else>查看详情</span>
              </div>
              <div
                v-if="item.status === 7"
                class="c-blue pointer mb-sm"
                @click="handleDeliveryVehicle(item)"
              >
                提车
              </div>
              <div
                v-if="item.remittanceButton"
                class="c-blue pointer mb-sm"
                @click="handlePaymentOpen(item)"
              >
                付款
              </div>
              <div
                v-if="item.status === 9"
                class="c-blue pointer mb-sm"
                @click="handleReceiveGoods(item)"
              >
                收货
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="flex-x-end mt-lg">
        <c-page-template
          small
          :total="total"
          :querys="querys"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <c-delivery-schedule ref="cDeliveryScheduleRef" />
    <c-order-payment ref="cOrderPaymentRef" @change="tableList" />
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { useRouter } from "vue-router";
import { onFileOpen } from "@/utils/index.js";
import { ElMessageBox, ElMessage } from "element-plus";
import { orderType, getStatusLabel } from "@/utils/status.js";
import cDeliverySchedule from "../../Order/components/DeliverySchedule.vue";
import cOrderPayment from "./components/OrderPayment.vue";
const { proxy } = getCurrentInstance();
const empty = new URL(`@/assets/img/table-kong.png`, import.meta.url).href;
const cDeliveryScheduleRef = ref();
const cOrderPaymentRef = ref();
const router = useRouter();
onMounted(() => {
  querys.value.status = -1;
});
const handleTabsChange = (item) => {
  querys.value.status = item.props.name;
  querys.value.current = 1;
  tableList();
};
const handleReset = () => {
  querys.value = {
    current: 1,
    size: 10,
    status: -1,
  };
  tableList();
};
const handleDetails = (item) => {
  router.push({
    path: "/Order/Details",
    query: {
      id: item.id,
    },
  });
};
const handleDeliveryVehicle = (item) => {
  ElMessageBox.confirm("是否确认提车？", "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      loading.value = true;
      const url = `/buyerPickupApply/apply?id=${item.id}`;
      await proxy.$get({ url });
      ElMessage.success("操作成功");
      loading.value = false;
      tableList();
    } catch (error) {
      loading.value = false;
    }
  });
};

const handleReceiveGoods = (item) => {
  ElMessageBox.confirm("是否确认收货？", "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      loading.value = true;
      const url = `/buyerPickupApply/makeDelivery?id=${item.id}`;
      await proxy.$get({ url });
      ElMessage.success("操作成功");
      loading.value = false;
      tableList();
    } catch (error) {
      loading.value = false;
    }
  });
};
const handlePaymentOpen = (item) => {
  cOrderPaymentRef.value.handleOpen(item);
};
const handleScheduleOpen = (item) => {
  cDeliveryScheduleRef.value.handleOpen(item);
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/buyerOrderList/buyerPage",
  getParams: () => {
    const params = {};
    if (querys.value.time && querys.value.time.length > 0) {
      params.startTime = querys.value.time[0];
      params.endTime = querys.value.time[1];
      params.time = null;
    }
    if (querys.value.status === -1) {
      params.status = null;
    }
    return params;
  },
});
</script>
<style lang="less" scoped>
.order-table {
  min-height: 58vh;
}
.table-header {
  background: #f6f8fa;
  font-size: 14px;
  font-weight: 500;
  color: #26282a;
  padding: 10px 0;
}
.table-body {
  border: 1px solid #e9e9e9;
  margin-top: 12px;
  .table-body_header {
    background: #f6f8fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px !important;
    padding: 12px;
    color: #5e6163;
    :deep(.el-link.el-link--primary) {
      font-size: 12px !important;
    }
  }
  .goods-img {
    width: 96px;
    height: 72px;
    border: 1px dashed rgba(0, 0, 0, 0.17);
  }
  .goods-info {
    display: flex;
    flex-direction: column;
    .goods-name {
      font-size: 14px;
      color: #202020;
      margin: auto 0;
    }
    .goods-port {
      font-size: 14px;
      color: #7c7c7c;
      font-weight: 400;
      margin: auto 0;
    }
  }
}

:deep(.el-tabs__header) {
  margin: 0 !important;
  .el-tabs__nav-wrap::after {
    position: static !important;
  }
  .el-tabs__item {
    color: #5e6163;
  }
  .el-tabs__item.is-active {
    color: var(--el-color-primary);
  }
}
</style>